%slider {
  @property --progress {
    syntax: "<integer>";
    initial-value: 0;
    inherits: true;
  }
  @property --progress2 {
    syntax: "<integer>";
    initial-value: 0;
    inherits: true;
  }
  [type="range"] {
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    width: 400px;
    overflow: hidden;
    height: 20px;
    &::-webkit-slider-runnable-track {
      height: 20px;
      background: linear-gradient(#9747ff 0 0) 0 0 /
        calc(var(--progress) * 1% + 20px * (50 - var(--progress)) / 100) 100%
        no-repeat #eee;
      border-radius: 24px;
    }
    &::-webkit-slider-thumb {
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fff;
      border: 3px solid #9747ff;
      view-timeline: --slider inline;
      anchor-name: --thumb;
    }
  }
  &.slider {
    position: relative;
    timeline-scope: --slider;
    animation: slider linear 3s reverse;
    animation-timeline: --slider;
    animation-range: contain;
    .tooltip {
      position-anchor: --thumb;
      position: absolute;
      //   inset-area: top;
      margin: 0 0 10px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
      font-size: 14px;
      border-radius: 4px;
      padding: 10px;
      color: #f0f0f0;
      background-color: #333;
      transform-origin: center bottom;
      rotate: calc((var(--progress2) - var(--progress)) * 2deg);
      filter: drop-shadow(4px 4px 4px rgba(50, 50, 50, 0.3));
      --progress2: var(--progress);
      transition: --progress2 0.1s ease-out;
      &::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: black transparent transparent transparent;
      }
      &::after {
        content: counter(num);
        counter-reset: num var(--progress);
      }
    }
    @at-root {
      @keyframes slider {
        to {
          --progress: 100;
        }
      }
    }
  }
}
